@extends('front.layout')
@section('content')  
    @if($page?->slug !== 'home')
    <div class="page-header text-center">
        <div class="container">
            <div class="row">
                <div class="col-12 col-sm-12 col-md-12 col-lg-12 d-flex justify-content-between align-items-center">
                    <div class="page-title"><h1>{{$page?->title}}</h1></div>
                    <!--Breadcrumbs-->
                    <div class="breadcrumbs"><a href="{{url('/')}}" title="Back to the home page">Home</a><span class="main-title"><i class="icon anm anm-angle-right-l"></i>{{$page?->title}}</span></div>
                    <!--End Breadcrumbs-->
                </div>
            </div>
        </div>
    </div>
    @endif
    
   @switch($page?->slug)
   @case('home')
   <section class="section collection-banners four-bnr py-0">
        <div class="container-fluid px-0">                      
            <div class="section-header d-none">
                <h2>Explore collection</h2>
            </div>

            <div class="collection-banner-grid">
                <div class="collection-banner-items collection-slider-4items slick-arrow-dots hov-arrow">
                    @foreach($category as $c)
                        <div class="collection-item">
                            <a href="{{url('shop/'.$c?->slug)}}" class="zoom-scal">
                                <div class="img">
                                    <img class="blur-up lazyload w-100" data-src="{{asset('uploads/'.$c->image)}}" src="{{asset('uploads/'.$c->image)}}" alt="{{$c?->title}}" title="" width="480" height="617" />
                                </div>
                                <div class="details middle-center p-lg-0">
                                    <div class="inner">
                                        @php
                                        $count = DB::table('product')->where(['category' => $c->id , 'is_show' => 1])->count();
                                        @endphp
                                        <span class="btn btn-light btn-lg text-capitalize head-font">{{$c?->title}} <sup>{{$count}}</sup></span>
                                    </div>
                                </div>
                            </a>
                        </div>   
                    @endforeach
                </div>
            </div>
        </div>
    </section>
   <section class="section product-slider">
                    <div class="container container-1330">
                        <div class="section-header">
                            <h2>New Arrival</h2>
                        </div>
                        <!--Product Grid-->
                        <div class="grid-products grid-view-items pro-hover3">
                            <div class="row col-row product-options row-cols-xl-4 row-cols-lg-4 row-cols-md-3 row-cols-sm-3 row-cols-2">    
                                @foreach($featured as $f)
                                @php
                                    $variant = DB::table('product_variance_data')->where('product_id', $f->id)->first();
                                    $product_img = DB::table('product_images')->where(['product_id'=>$f->id, 'variant_id' => $variant->id])->first();
                                @endphp
                                <div class="item col-item">
                                    <div class="product-box">
                                        <!-- Start Product Image -->
                                        <div class="product-image">
                                            <!-- Start Product Image -->
                                            <a href="{{url('shop/'.$f?->slug)}}" class="product-img">
                                                <!-- Image -->
                                                <img class="primary blur-up lazyload" data-src="{{asset('uploads/'.$variant->image)}}" src="{{asset('uploads/'.$f->image)}}" alt="{{$f?->title}}" title="{{$f?->title}}" width="625" height="759" />
                                                <!-- End Image -->
                                                <!-- Hover Image -->
                                                <img class="hover blur-up lazyload" data-src="{{asset('uploads/'.$product_img->other_image)}}" src="{{asset('uploads/'.$product_img->other_image)}}" alt="{{$f?->title}}" title="{{$f?->title}}" width="625" height="759" />
                                                <!-- End Hover Image -->
                                            </a>
                                            <!-- End Product Image -->
                                            <!-- Product label -->
                                            @if($f->sale_price < $f->reg_price)
                                                <div class="product-labels round-pill"><span class="lbl on-sale">Sale</span></div>
                                            @endif
                                            <!-- End Product label -->											
                                        </div>
                                        <!-- End Product Image -->
                                        <!-- Start Product Details -->
                                        <div class="product-details text-left">
                                            <!--Product Vendor-->
                                            <div class="product-vendor">{{$f->stitle}}</div>
                                            <!--End Product Vendor-->
                                            <div class="product-name-price">
                                                <!-- Product Name -->
                                                <div class="product-name">
                                                    <a href="{{url('shop/'.$f?->slug)}}">{{$f?->title}}</a>
                                                </div>
                                                <!-- End Product Name -->
                                                <!-- Product Price -->
                                                <div class="product-price m-0">
                                                    <span class="price old-price">₹{{number_format($variant->reg_price, 2)}}</span><span class="price">₹{{number_format($variant->sale_price, 2)}}</span>
                                                </div>
                                                <!-- End Product Price -->
                                            </div>
                                            <!-- Product Review -->
                                            <div class="product-review">
                                                <i class="icon anm anm-star-o"></i><i class="icon anm anm-star-o"></i><i class="icon anm anm-star-o"></i><i class="icon anm anm-star-o"></i><i class="icon anm anm-star-o"></i>
                                                <span class="caption hidden ms-1">0 Reviews</span>
                                            </div>
                                            <!-- End Product Review -->
                                            <!--Product Button-->
                                            <div class="button-bottom-action style1">
                                                <div class="button-left">
                                                    <!--Cart Button-->
                                                    <a href="{{url('shop/'.$f?->slug)}}" class="btn btn-primary btn-md">
                                                        <i class="icon anm anm-bag-l me-2"></i><span class="text">View Details</span>
                                                    </a>
                                                    <!--End Cart Button-->
                                                </div>
                                            </div>
                                            <!--End Product Button-->
                                        </div>
                                        <!-- End product details -->
                                    </div>
                                </div>
                                @endforeach
                            </div>

                            <div class="view-collection text-center mt-4 mt-md-5">
                                <a href="{{url('collection')}}" class="btn btn-secondary btn-lg ">View Collection</a>
                            </div>
                        </div>
                        <!--End Product Grid-->
                    </div>
                </section>
                <!--End Products section-->

                <!--Collection banner-->
                <section class="section collection-banners four-one-bnr p-0">
                    <div class="container container-1330">                      
                        <div class="collection-banner-grid">
                            <div class="row">
                                <div class="collection-banner-item">
                                    <div class="row sp-row row-cols-lg-4 row-cols-md-4 row-cols-sm-4 row-cols-2 justify-content-center">
                                        @foreach($category as $c)
                                        <div class="collection-item sp-col">
                                            <a href="{{url('shop/'.$c?->slug)}}" class="zoom-scal clr-none">
                                                <div class="img">
                                                    <img class="blur-up lazyload w-100" data-src="{{asset('uploads/'.$c->image)}}" src="{{asset('uploads/'.$c->image)}}" alt="{{$c?->title}}" title="{{$c?->title}}" width="306" height="307" />
                                                </div>
                                                <div class="details middle-center p-lg-0">
                                                    <div class="inner">
                                                        <span class="btn btn-light btn-lg text-nowrap">{{$c?->title}}</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                </section>
                <!--End Collection banner-->

                <!--Products With Tabs-->
                <section class="section product-slider tab-slider-product">
                    <div class="container container-1330">
                        <div class="section-header">
                            <h2>Find The Perfect Fit</h2>
                        </div>

                        <div class="tabs-listing">
                            <ul class="nav nav-tabs style2 justify-content-center" id="productTabs" role="tablist">
                                @foreach($category as $key => $c)
                                    @if($c?->title === 'Hookah' || $c?->title === 'Glass Bong Percolator' || $c?->title === 'Hookah Flavours' || $c?->title === 'Hookah Accessories')
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link {{$c?->title === 'Hookah' ? 'active' : ''}}" id="{{$c?->slug}}-tab" data-bs-toggle="tab" data-bs-target="#category{{$key}}" type="button" role="tab" aria-controls="category{{$key}}" aria-selected="true">{{$c?->title}}</button>
                                    </li>
                                    @endif
                                @endforeach
                            </ul>

                            <div class="tab-content" id="productTabsContent">
                                @foreach($category as $key => $c)
                                    @if($c?->title === 'Hookah' || $c?->title === 'Glass Bong Percolator' || $c?->title === 'Hookah Flavours' || $c?->title === 'Hookah Accessories')
                                    <div class="tab-pane {{$c?->title === 'Hookah' ? 'show active' : ''}}" id="category{{$key}}" role="tabpanel" aria-labelledby="{{$c?->slug}}-tab">
                                    <!--Product Grid-->
                                    <div class="grid-view-items">
                                        <div class="product-slider-4items gp15 arwOut5 grid-products pro-hover3"> 
                                        @php
                                        $products = DB::table('product')->where(['product.is_show' => 1, 'category' => $c->id])->orderBy('id', 'desc')->limit('5')->get();
                                        @endphp
                                            @foreach($products as $p)
                                                @php
                                                    $variant = DB::table('product_variance_data')->where('product_id', $p->id)->first();
                                                    $product_img = DB::table('product_images')->where(['product_id'=>$p->id, 'variant_id' => $variant->id])->first();
                                                    $subcategory = DB::table('subcategory')->where('id', $p->subcategory)->first();
                                                @endphp
                                                <div class="item col-item">
                                                    <div class="product-box">
                                                        <!-- Start Product Image -->
                                                        <div class="product-image">
                                                            <!-- Start Product Image -->
                                                            <a href="{{url('shop/'.$p?->slug)}}" class="product-img">
                                                                <!-- Image -->
                                                                <img class="primary blur-up lazyload" data-src="{{asset('uploads/'.$variant->image)}}" src="{{asset('uploads/'.$variant->image)}}" alt="{{$p?->title}}" title="{{$p?->title}}" width="625" height="759" />
                                                                <!-- End Image -->
                                                                <!-- Hover Image -->
                                                                <img class="hover blur-up lazyload" data-src="{{asset('uploads/'.$product_img->other_image)}}" src="{{asset('uploads/'.$product_img->other_image)}}" alt="{{$p?->title}}" title="{{$p?->title}}" width="625" height="759" />
                                                                <!-- End Hover Image -->
                                                            </a>
                                                            <!-- End Product Image -->
                                                            <!-- Product label -->
                                                            @if($variant->sale_price < $variant->reg_price)
                                                                <div class="product-labels round-pill"><span class="lbl on-sale">Sale</span></div>
                                                            @endif
                                                            <!-- End Product label -->											
                                                        </div>
                                                        <!-- End Product Image -->
                                                        <!-- Start Product Details -->
                                                        <div class="product-details text-left">
                                                            <!--Product Vendor-->
                                                            <div class="product-vendor">{{$subcategory?->title}}</div>
                                                            <!--End Product Vendor-->
                                                            <div class="product-name-price">
                                                                <!-- Product Name -->
                                                                <div class="product-name">
                                                                    <a href="{{url('shop/'.$p?->slug)}}">{{$p?->title}}</a>
                                                                </div>
                                                                <!-- End Product Name -->
                                                                <!-- Product Price -->
                                                                <div class="product-price m-0">
                                                                    <span class="price old-price">₹{{number_format($variant->reg_price, 2)}}</span><span class="price">₹{{number_format($variant->sale_price, 2)}}</span>
                                                                </div>
                                                                <!-- End Product Price -->
                                                            </div>
                                                            <!-- Product Review -->
                                                            <div class="product-review">
                                                                <i class="icon anm anm-star-o"></i><i class="icon anm anm-star-o"></i><i class="icon anm anm-star-o"></i><i class="icon anm anm-star-o"></i><i class="icon anm anm-star-o"></i>
                                                                <span class="caption hidden ms-1">0 Reviews</span>
                                                            </div>
                                                            <!-- End Product Review -->
                                                            <!--Product Button-->
                                                            <div class="button-bottom-action style1">
                                                                <div class="button-left">
                                                                    <!--Cart Button-->
                                                                    <a href="{{url('shop/'.$p?->slug)}}" class="btn btn-primary btn-md">
                                                                        <i class="icon anm anm-bag-l me-2"></i><span class="text">View Details</span>
                                                                    </a>
                                                                    <!--End Cart Button-->
                                                                </div>
                                                            </div>
                                                            <!--End Product Button-->
                                                        </div>
                                                        <!-- End product details -->
                                                    </div>
                                                </div>
                                            @endforeach                              
                                        </div>
                                    </div>
                                    <!--End Product Grid-->
                                </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    </div>
                </section>
                <!--End Products With Tabs-->


                <!--Parallax Banner-->
                <div class="section parallax-banner-style1 py-0" style="display: none;">
                    <div class="hero hero-large hero-overlay bg-size">
                        <img class="bg-img" src="https://img.freepik.com/free-photo/woman-vaping-from-hookah-bar_23-2149194235.jpg?uid=P88140112&ga=GA1.1.2049577187.1661448709&semt=ais_items_boosted&w=740" alt="parallax-banner" width="1920" height="645" />
                        <div class="hero-inner d-flex-justify-center">
                            <div class="container">
                                <div class="wrap-text mx-auto text-center">
                                    <h1 class="hero-title text-uppercase">Deals of the week<br> Flat <span class="text-primary">50%</span> Off</h1>
                                    <p class="hero-subtitle h3 text-transform-none">Sale will end soon in</p>
                                    <!--Countdown Timer-->
                                    <div class="hero-saleTime dark d-flex-justify-center text-center" data-countdown="2024/10/01"></div>
                                    <!--End Countdown Timer-->
                                    <a href="#" class="hero-btn btn btn-primary ">Explore Deal now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--End Parallax Banner-->


                <!--Testimonial Section-->
                <section class="section testimonial-slider style1">
                    <div class="container">
                        <div class="section-header">
                            <h2>Testimonials</h2>
                        </div>

                        <div class="testimonial-wraper">
                            <!--Testimonial Slider Items-->
                            <div class="testimonial-slider-3items gp15 slick-arrow-dots rounded-dots arwOut5">
                                @foreach($testimonials as $t)
                                <div class="testimonial-slide">
                                    <div class="testimonial-content text-center"> 
                                        <div class="content">  
                                            <div class="text"><p>{{$t->comment}}</p></div>
                                            <div class="product-review my-3">
                                                <i class="icon anm anm-star"></i><i class="icon anm anm-star"></i><i class="icon anm anm-star"></i><i class="icon anm anm-star"></i><i class="icon anm anm-star"></i>
                                                <span class="caption hidden ms-1">24 Reviews</span>
                                            </div>
                                        </div>
                                        <div class="auhimg d-flex-justify-center text-left">
                                            <div class="auhtext ms-3">
                                                <h5 class="authour mb-1">{{$t?->title}}</h5>
                                                <p class="text-muted">{{$t->designation}}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                            <!--Testimonial Slider Items-->
                        </div>
                    </div>
                </section>
                <!--End Testimonial section-->
                <!--Service Section-->
                <section class="section service-section pb-0 pt-0">
                    <div class="container">
                        <div class="service-info row col-row row-cols-lg-4 row-cols-md-4 row-cols-sm-2 row-cols-2 text-center">
                            <div class="service-wrap col-item">
                                <div class="service-icon mb-3">
                                    <i class="icon anm anm-redo-l"></i>
                                </div>
                                <div class="service-content">
                                    <h4 class="title mb-2 fw-600 body-font">Free Returns</h4>
                                    <span class="text-muted">Return money within 10 days</span>
                                </div>
                            </div>
                            <div class="service-wrap col-item">
                                <div class="service-icon mb-3">
                                    <i class="icon anm anm-phone-call-l"></i>
                                </div>
                                <div class="service-content">
                                    <h4 class="title mb-2 fw-600 body-font">SHOP ONLINE 24/7</h4>
                                    <span class="text-muted">Contact us 24/7 hours a day</span>
                                </div>
                            </div>
                            <div class="service-wrap col-item">
                                <div class="service-icon mb-3">
                                    <i class="icon anm anm-truck-l"></i>
                                </div>
                                <div class="service-content">
                                    <h4 class="title mb-2 fw-600 body-font">FREE SHIPPING</h4>
                                    <span class="text-muted">From all orders over $100</span>
                                </div>
                            </div>
                            <div class="service-wrap col-item">
                                <div class="service-icon mb-3">
                                    <i class="icon anm anm-credit-card-l"></i>
                                </div>
                                <div class="service-content">
                                    <h4 class="title mb-2 fw-600 body-font">SECURE SHOPPING</h4>
                                    <span class="text-muted">You're in safe hands</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
   @break
   @case('collection')
   <div class="container">              
        <div class="collection-style1 row col-row row-cols-xl-4 row-cols-lg-3 row-cols-md-2 row-cols-2 justify-content-center">
            @foreach($category as $c)
            <div class="category-item col-item zoomscal-hov">
                <a href="{{url('shop/'.$c?->slug)}}" class="category-link clr-none">
                    <div class="zoom-scal zoom-scal-nopb"><img class="blur-up lazyload w-100" data-src="{{asset('/uploads/'.$c->image)}}" src="{{asset('/uploads/'.$c->image)}}" alt="{{$c?->title}}" title="{{$c?->title}}" width="365" height="365" /></div>
                    <div class="details mt-3 d-flex justify-content-between align-items-center">
                        <h4 class="category-title mb-0">{{$c?->title}}</h4>
                        @php
                            $count = DB::table('product')->where('category', $c->id)->count();
                        @endphp
                        <p class="counts">{{$count}} Items</p>
                    </div>
                </a>
            </div>
            @endforeach
        </div>
    </div>
   @break
   @case('about-us')
   {!! $page?->description !!}
  <section class="testimonial-section">
      <div class="testimonial-wrapper overflow-x-hidden pt-40 pb-40 white-bg">
         <div class="container">
            <div class="row">
               <div class="col-lg-4">
                  <!--=== Section Content Box ===-->
                  <div class="section-content-box mb-40" data-aos="fade-right" data-aos-delay="30" data-aos-duration="800">
                     <div class="section-title mb-50">
                        <h2>What Our Clients Say About Us</h2>
                     </div>
                     <div class="testimonial-arrows style-one justif"></div>
                  </div>
               </div>
               <div class="col-lg-8">
                  <!--=== Testimonial Slider ===-->
                  <div class="testimonial-slider-one" data-aos="fade-left" data-aos-delay="50" data-aos-duration="1000">
                      @foreach($testimonials as $t)
                     <!--=== Testimonial Item ===-->
                     <div class="testimonial-item style-one mb-40">
                        <div class="testimonial-content">
                           <p>{!! $t->comment !!}</p>
                           <div class="author-quote-item d-flex justify-content-between align-items-center">
                              <div class="author-item">
                                 <div class="author-thumb">
                                    <img src="{{asset('uploads/'.$t->image)}}" alt="{{$t?->title}}">
                                 </div>
                                 <div class="author-info">
                                    <h5>{{$t?->title}}</h5>
                                    <ul class="ratings rating5">
                                       <li><i class="fas fa-star"></i></li>
                                       <li><i class="fas fa-star"></i></li>
                                       <li><i class="fas fa-star"></i></li>
                                       <li><i class="fas fa-star"></i></li>
                                       <li><i class="fas fa-star"></i></li>
                                    </ul>
                                 </div>
                              </div>
                              <div class="quote-icon">
                                 <i class="flaticon flaticon-right-quote"></i>
                              </div>
                           </div>
                        </div>
                     </div>
                     @endforeach
                  </div>
               </div>
            </div>
         </div>
      </div>
   </section>
   @break
   @case('blogs')
   {!! $page?->description !!}
   <div class="container">
        <!--Blog Grid-->
        <div class="blog-grid-view">
            <div class="row col-row row-cols-lg-3 row-cols-sm-2 row-cols-1">
                @foreach($blogs as $b)
                <div class="blog-item col-item">
                    <div class="blog-article zoomscal-hov">
                        <div class="blog-img">
                            <a class="featured-image rounded-0 zoom-scal" href="{{url('/blogs/'.$b?->slug)}}"><img class="rounded-0 blur-up lazyload" data-src="{{asset('uploads/'.$b->image)}}" src="{{asset('uploads/'.$b->image)}}" alt="{{$b?->title}}" width="740" height="410" /></a>
                        </div>
                        <div class="blog-content">
                            <h2 class="h3"><a href="{{url('/blogs/'.$b?->slug)}}">{{$b?->title}}</a></h2>
                            <ul class="publish-detail d-flex-wrap">                      
                                <li><i class="icon anm anm-clock-r"></i> <time datetime="{{date('Y-m-d', strtotime($b->created_at))}}">{{date('F d, Y', strtotime($b->created_at))}}</time></li>
                            </ul>
                            <p class="content">
                                @php
                                $content = substr(strip_tags($b?->description), 0, 100)
                                @endphp
                                {{$content}}
                            </p>
                            <a href="{{url('/blogs/'.$b?->slug)}}" class="btn btn-secondary btn-sm">Read more</a>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>

            <!-- Pagination -->
            <!--<nav class="clearfix pagination-bottom">-->
            <!--    <ul class="pagination justify-content-center">-->
            <!--        <li class="page-item disabled"><a class="page-link" href="#"><i class="icon anm anm-angle-left-l"></i></a></li>-->
            <!--        <li class="page-item active"><a class="page-link" href="#">1</a></li>-->
            <!--        <li class="page-item"><a class="page-link" href="#">2</a></li>-->
            <!--        <li class="page-item"><a class="page-link dot" href="#">...</a></li>-->
            <!--        <li class="page-item"><a class="page-link" href="#">5</a></li>-->
            <!--        <li class="page-item"><a class="page-link" href="#"><i class="icon anm anm-angle-right-l"></i></a></li>-->
            <!--    </ul>-->
            <!--</nav>-->
            <!-- End Pagination -->
        </div>
        <!--End Blog Grid-->
    </div>
   @break
   @case('contact-us')
   <section class="contact-information-section pt-40 pb-40">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="single-information-wrapper">
                        <div class="single-information-item d-flex justify-content-between mb-15" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="50">
                            <div class="content mb-20">
                                <h4>Office Address:</h4>
                                <p>{{$contact->address}} </p>
                            </div>
                            <div class="content mb-20">
                                <h4>Phone</h4>
                                <p><a href="tel:+{{$contact->phone}}">{{$contact->phone}}</a></p>

                            </div>
                            <div class="content mb-20">
                                <h4>Email</h4>
                                <p><a href="mailto:{{$contact->email}}">{{$contact->email}}</a></p>
                            </div>
                        </div>
                       
                    </div>
                </div>
            </div>
        </div>
    </section><!--====== End Contact Information Section ======-->
            <!--====== Start Contact Section ======-->
    <section class="contact-section pt-0 pb-40">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <div class="contact-wrapper p-r z-1 mb-50" data-aos="fade-right" data-aos-delay="10" data-aos-duration="1000">
                        <div class="shape shape-one"><span><img src="{{url('public/frontend/')}}/images/shape/cl-line.png" alt="Line Shape"></span></div>
                        <h3>Get in touch</h3>
                        <div id="message"></div>
                        <form class="pesco-contact-form" id="contact-form">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <input type="text" placeholder="Name" id="name" class="form_control" name="name" required>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <input type="email" placeholder="Email" id="email" class="form_control" name="email" required>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <input type="phone" placeholder="Phone" id="phone" class="form_control" name="phone" required>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <textarea class="form_control" placeholder="Write Reviews" name="message" cols="5" rows="4"></textarea>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form_group">
                                        <button class="theme-btn style-one">Send Message</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div> 
                </div>
                <div class="col-lg-4">
                    <div class="contact-img-text text-center mb-50 d-none d-lg-block" data-aos="fade-left" data-aos-delay="15" data-aos-duration="1500">
                        <img src="{{url('public/frontend/')}}/images/contact/text-img.png" alt="Text">
                    </div>
                </div>
            </div>
        </div>
    </section><!--====== End Contact Section ======-->
    <script>
      $(document).ready(function() {
        $('#contact-form').on('submit', function(event) {
            event.preventDefault();
            
            var formData = new FormData(this);
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type: 'POST',
                url: '{{url("/send-enquiry")}}',
                data: formData,
                cache: false,
               contentType: false,
               processData: false,
                success: function(response) {
                    if (response.status == 'success') {
                       $('#message').html('<div class="alert alert-success">Thank you For Contacting Us, We will Contact You Shortly</div>');
                        setTimeout(function() {$('#message').fadeOut(400);}, 3000);
                        $('input').val('');
                        $('textarea').val('');
                       //  location.reload(true);
                    } else {
      
                        $('#message').html('<div class="alert alert-danger">Something Went wrong. Please try again</div>');
                        setTimeout(function() {$('#message').fadeOut(400);}, 3000);
                    }
                },
                error: function() {
                    $('#message').html('<div class="alert alert-danger">Something Went wrong. Please try again</div>');
                    setTimeout(function() {$('#message').fadeOut(400);}, 3000);
                }
            });
        });
      });
   </script>
   @break
   @case('carts')
   
    <section class="cart-page-section pt-40 pb-40">
                <div class="container has-data">
                    <div class="row">
                        <div class="col-xl-8">
                            <div class="cart-wrapper mb-40" data-aos="fade-up" data-aos-duration="1200">
                                <h3 class="mb-20">Total Cart Item: <span class="pro-count">0</span></h3>
                                <div class="cart-list table-responsive">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th><i class="fas fa-tshirt"></i>Products Details</th>
                                                <th><i class="fas fa-sack-dollar"></i>Price</th>
                                                <th style="text-align: center;"><i class="fas fa-eye"></i>Quantity</th>
                                                <th style="text-align: right;"><i class="fas fa-money-bill"></i>Total</th>
                                            </tr>
                                        </thead>
                                        <tbody id="cartTable">
                                        </tbody>
                                    </table>
                                </div>
                                <div class="cart-bottom d-flex align-items-center justify-content-between mt-40">
                                    <div class="ct-shopping">
                                        <a class="theme-btn style-one" href="{{url('shop')}}">Continue Shopping</a>
                                        
                                    </div>
                                    <div class="cl-cart">
                                        <button class="theme-btn style-one" id="clearCart">Clear Cart</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-4">
                            <!--=== Cart Sidebar Area  ===-->
                            <div class="cart-sidebar-area">
                                <!--=== Cart Widget  ===-->
                                <div class="cart-widget coupon-box-widget mb-40" data-aos="fade-up" data-aos-duration="1200">
                                    <h4>Use Coupon Code</h4>
                                    <p>Enter your coupon code if you have one.</p>
                                    <form class="coupon-form">
                                        <input type="text" class="form_control" required name="code" id="code">
                                        <input type="hidden" class="form_control totalAmount" required name="totalAmount" id="totalAmount">
                                        <button type="submit" class="thme-btn style-one apply">Apply</button>
                                    </form>
                                    <div class="removeCoupon text text-danger d-none">x Remove Offer</div>
                                </div>
                                <!--=== Cart Widget  ===-->
                                <div class="cart-widget cart-total-widget mb-40" data-aos="fade-up" data-aos-duration="1400">
                                    <h4>Cart Totals</h4>
                                    <div class="sub-total">
                                        <h5>Subtotal <span class="price">₹<span class="totalAmount sub_total" id="subTotal">0</span></span></h5>
                                    </div>
                                     <div class="coupon-box sub-total d-none">
                                        <h5>Coupon<div class="couponName" style="    display: inline-block;"></div><span class="couponPrice">-₹<span class="couponAmount">0</span></span></h5>
                                        <input type="hidden" id="couponValue"  class="couponValue" name="couponValue" />
                                    </div>
                                    <div class="price-total">
                                        <h5>Total <span class="price">₹<span class="finalAmount">0</span></span></h5>
                                    </div>
                                    <div class="proceced-checkout">
                                        <a href="javascript:void(0)" id="checkout" class="theme-btn style-one">Proceed to checkout</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container hasnot-data d-none">
                  <div class="row text-center">
                      <div class="col-md-4"></div>
                      <div class="col-md-4">
                            <h3>Cart Is Empty!!!</h3>
                            <a class="theme-btn style-one mt-5" style href="{{url('shop')}}">Continue Shopping</a>
                      </div>
                      <div class="col-md-4"></div>
                     
                  </div>
               </div>
            </section><!--====== End Cart Section ======-->

   <script>
      var getData = localStorage.getItem("cartData");
      if(getData == null){
          console.log('test');
          $('.has-data').addClass('d-none');
          $('.hasnot-data').removeClass('d-none');
          
      }else{
          if(JSON.parse(getData).length > 0){
              $('.has-data').removeClass('d-none');
              $('.hasnot-data').addClass('d-none');
          }else{
              $('.hasnot-data').removeClass('d-none');
              $('.has-data').addClass('d-none');
          }
      }
   </script>
   @break
   @case('checkout')
   <section class="checkout-section pt-40 pb-40">
                <div class="container">
                    <div class="row">
                        <div class="col-xl-12">
                            <!--=== Checkout Wrapper ===-->
                            <div class="checkout-wrapper" data-aos="fade-up" data-aos-duration="1200">
                                <!--=== Checkout Form ===-->
                                <form class="checkout-form" id="checkout-form">
                                    <div class="row">
                                        <div class="col-xl-7">
                                            @if(empty(Auth::guard('customer')->user()))
                                            <h4>Returning customer?
                                                 <a href="{{url('login')}}" class="btn btn-link btn-toggle">Login
                                              </a></h4>
                                            @endif
                                            @if(count($address) > 0)
                                            <div class="billing-wrapper">
                                                <h3 class="title">Billing details</h3>
                                                
                                                    <div class="addressBox">
                                                        <div class="row">
                                                    
                                                    @foreach($address as $key => $a)
                                                    @php
                                                        $addressData = json_decode($a->address_details); 
                                                    @endphp
                                                    <div class="col-md-1">
                                                        <input type="radio" id="address{{$key}}" name="address_id" value="{{$a->id}}"> 
                                                    </div>
                                                    <div class="col-md-11">
                                                        <label for="{{$a->id}}">{{$addressData->billing_fname.' '.$addressData->billing_lname}}<br>{{$addressData->phone}}<br>{{$addressData->email}}<br>{{$addressData->address.', '.$addressData->city.', '.$addressData->pincode.', '.$addressData->state.','.$addressData->country}}</label>
                                                    </div>
                                                    <div class="col-md-12">
                                                        <hr>
                                                    </div>
                                                    @endforeach
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <a href="javascript:void(0)" class="theme-btn style-one addAddressBtn">Add Address</a>
                                                </div>
                                                <div class="row addAddress d-none">
                                                    <div class="col-lg-6">
                                                        <div class="form-group">
                                                            <label>First Name <span>*</span></label>
                                                            <input type="text" class="form_control" id="billing_fname"  placeholder="Ex: Thomas" name="billing_fname">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="form-group">
                                                            <label>Last Name <span>*</span></label>
                                                            <input type="text" class="form_control" id="billing_lname" placeholder="Ex: Alison" name="billing_lname">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-12">
                                                        <div class="form-group">
                                                            <label>Company name(optional)</label>
                                                            <input type="text" class="form_control" id="company_name" placeholder="Ex: Alison" name="company_name">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-12">
                                                        <div class="form-group">
                                                            <label>Country</label>
                                                            <input type="text" class="form_control" id="country" placeholder="Country" name="country">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-12">
                                                        <div class="form-group">
                                                            <label>State</label>
                                                            <input type="text" class="form_control" id="state" placeholder="State" name="state">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="form-group">
                                                            <label>Postcode / Zip <span>*</span></label>
                                                            <input type="text" class="form_control" name="pincode" id="pincode" placeholder="Ex:  WC2N 5DU">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="form-group">
                                                            <label>Town / City <span>*</span></label>
                                                            <input type="text" class="form_control" name="city" id="city" placeholder="Ex: London" >
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-12">
                                                        <div class="form_group">
                                                            <label>Street address<span>*</span></label>
                                                            <input type="text" class="form_control" id="address" name="address" placeholder="Ex:  123 Elm Street">
                                                            <input type="text" class="form_control" id="address1" name="address1" placeholder="Ex:  123 Elm Street">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="form_group">
                                                            <label>Phone Number <span>*</span></label>
                                                            <input type="tel" class="form_control" placeholder="Ex: +1 (555) 123-4567" name="phone" id="phone">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="form_group">
                                                            <label>Email address<span>*</span></label>
                                                            <input type="email" class="form_control" placeholder="Ex: example@domain.com" value="{{!empty(Auth::guard('customer')->user()) ? Auth::guard('customer')->user()->email : ''}}" name="email" {{!empty(Auth::guard('customer')->user()) ? 'readOnly' : ''}}>
                                                            <input type="hidden" name="productCheckout" id="productCheckout" value="" />
                                                            <input type="hidden" name="couponCheckout" id="couponCheckout" value="" />
                                                            <input type="hidden" name="paid_amount" id="finalAmountinCheckout" class="finalAmountinCheckout" value="" />
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-12">
                                                        <div class="form_group">
                                                            <label>Order Notes (optional)</label>
                                                            <textarea name="notes" id="notes" class="form_control" placeholder="e.g. special notes for delivery."></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            @else
                                                <div class="row">
                                                    <div class="col-lg-6">
                                                        <div class="form-group">
                                                            <label>First Name <span>*</span></label>
                                                            <input type="text" class="form_control" id="billing_fname"  placeholder="Ex: Thomas" name="billing_fname">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="form-group">
                                                            <label>Last Name <span>*</span></label>
                                                            <input type="text" class="form_control" id="billing_lname" placeholder="Ex: Alison" name="billing_lname">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-12">
                                                        <div class="form-group">
                                                            <label>Company name(optional)</label>
                                                            <input type="text" class="form_control" id="company_name" placeholder="Ex: Alison" name="company_name">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-12">
                                                        <div class="form-group">
                                                            <label>Country</label>
                                                            <input type="text" class="form_control" id="country" placeholder="Country" name="country">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-12">
                                                        <div class="form-group">
                                                            <label>State</label>
                                                            <input type="text" class="form_control" id="state" placeholder="State" name="state">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="form-group">
                                                            <label>Postcode / Zip <span>*</span></label>
                                                            <input type="text" class="form_control" name="pincode" id="pincode" placeholder="Ex:  WC2N 5DU">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="form-group">
                                                            <label>Town / City <span>*</span></label>
                                                            <input type="text" class="form_control" name="city" id="city" placeholder="Ex: London" >
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-12">
                                                        <div class="form_group">
                                                            <label>Street address<span>*</span></label>
                                                            <input type="text" class="form_control" id="address" name="address" placeholder="Ex:  123 Elm Street">
                                                            <input type="text" class="form_control" id="address1" name="address1" placeholder="Ex:  123 Elm Street">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="form_group">
                                                            <label>Phone Number <span>*</span></label>
                                                            <input type="tel" class="form_control" placeholder="Ex: +1 (555) 123-4567" name="phone" id="phone">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="form_group">
                                                            <label>Email address<span>*</span></label>
                                                            <input type="email" class="form_control" placeholder="Ex: example@domain.com" value="{{!empty(Auth::guard('customer')->user()) ? Auth::guard('customer')->user()->email : ''}}" name="email" {{!empty(Auth::guard('customer')->user()) ? 'readOnly' : ''}}>
                                                            <input type="hidden" name="productCheckout" id="productCheckout" value="" />
                                                            <input type="hidden" name="couponCheckout" id="couponCheckout" value="" />
                                                            <input type="hidden" name="paid_amount" id="finalAmountinCheckout" class="finalAmountinCheckout" value="" />
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-12">
                                                        <div class="form_group">
                                                            <label>Order Notes (optional)</label>
                                                            <textarea name="notes" id="notes" class="form_control" placeholder="e.g. special notes for delivery."></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                        <div class="col-xl-5">
                                            <div class="order-summary-wrapper mb-30">
                                                <h3 class="title">Billing details</h3>
                                                <div class="order-list">
                                                    <div class="list-item">
                                                        <div class="item-title">Product</div>
                                                        <div class="subtotal">Subtotal</div>
                                                    </div>
                                                    <div class="checkOutItems"></div>
                                                    
                                                    <div class="list-item">
                                                        <div class="subtotal">Subtotal</div>
                                                        <div class="product-total">₹<span class="sub_total">0.00</span></div>
                                                    </div>
                                                    
                                                    <div class="list-item getCoupon">
                                                        <div class="shipping">Coupon (<span class="coup"></span>)</div>
                                                        <div class="shipping-total couponValueinCheckout">0.00</div>
                                                    </div>
                                                    <div class="list-item">
                                                        <div class="total">Total</div>
                                                        <div class="product-total">₹<span class="finalAmountinCheckout">0.00</span></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="payment-method-wrapper">
                                                <h4 class="title mb-20">Payments Method</h4>
                                                <ul id="paymentMethod" class="mb-20">
                                                    <!-- Default unchecked -->
                                                    <li class="form-check">
                                                        <input class="form-check-input" type="radio" name="flexRadioDefault" id="method1" checked>
                                                        <label class="form-check-label" for="method1" data-bs-toggle="collapse" data-bs-target="#collapse0">Direct bank transfer</label>
                                                        <div id="collapse0" class="collapse show" data-bs-parent="#paymentMethod">
                                                            <p>Make your payment directly into our bank account. Please use your Order ID as the payment reference.</p>
                                                        </div>
                                                    </li>
                                                    <!-- Default unchecked -->
                                                    <li class="form-check">
                                                        <input class="form-check-input" type="radio" name="flexRadioDefault" id="method2">
                                                        <label class="form-check-label" for="method2" data-bs-toggle="collapse" data-bs-target="#collapse1">Check payments</label>
                                                        <div id="collapse1" class="collapse" data-bs-parent="#paymentMethod">
                                                            <p>Make your payment directly into our bank account. Please use your Order ID as the payment reference.</p>
                                                        </div>
                                                    </li>